<template>
  <a-modal
    v-model:visible="visible"
    :width="500"
    centered
    :maskClosable="false"
    destroyOnClose
    @ok="onFinish"
    title="文件上传"
    :confirm-loading="confirmLoading"
  >
    <a-form v-bind="layout" @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item>
        <a-upload
          v-model:file-list="fileList"
          accept=".mp4"
          action=""
          :max-count="1"
          :showUploadList="false"
          :customRequest="uploadFunc"
        >
          <a-button>选择文件</a-button>
        </a-upload>
        <span class="updateText margin-left-8">{{ name }}</span>
      </a-form-item>
      <a-form-item name="name" label="名称">
        <a-input v-model:value="formState.name" placeholder="请输入"></a-input>
      </a-form-item>
      <a-form-item name="label" label="标签" class="radio-tag">
        <a-radio-group v-model:value="formState.tag">
          <a-radio-button
            :value="item.label"
            v-for="(item, index) in labelOptions"
            :key="index"
            @click="handleRadioClick(item.label)"
          >
            {{ item.label }}</a-radio-button
          >
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { onMounted, reactive, toRefs, ref, watch, computed } from "vue";
import { message } from "ant-design-vue";
import { createTask } from "@/api/video";
import { uploadFile } from "@/api/common";

export default {
  name: "AddModal",
  props: {
    modalVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    onMounted(() => {
      init();
    });
    const init = () => {};
    const layout = {
      wrapperCol: {
        span: 24,
      },
    };

    const state = reactive({
      confirmLoading: false,
      visible: ref(props.modalVisible),
      fileList: [],
      formState: {
        tag: null,
        name: null,
        filepath: null,
      },
      labelOptions: [
        {
          label: "体育赛事",
          value: 1,
        },
        {
          label: "演讲",
          value: 2,
        },
        {
          label: "其他",
          value: 3,
        },
      ],
    });

    watch(
      () => props.modalVisible,
      (value) => {
        if (!value) resetFields();
        state.visible = value;
      }
    );

    const resetFields = () => {
      state.fileList = [];
    };

    const handleCancel = () => {
      emit("cancel");
    };

    const name = computed(() => {
      if (!state.fileList || state.fileList.length < 1) {
        return "未选择任何文件";
      }
      return state.fileList[0].name;
    });

    const onFinish = () => {
      createTask(state.formState)
        .then((res) => {
          if (res.result) {
            message.success("新增成功");
            emit("submit");
            emit("cancel");
          } else {
            message.error("新增失败");
          }
        })
        .catch(() => {
          message.error("新增失败");
        });
    };

    const onFinishFailed = (errorInfo) => {
      message.error(errorInfo);
      console.log(errorInfo);
    };

    const uploadFunc = (res) => {
      state.uploadLoading = true;
      if (res.file) {
        const formData = new FormData();
        formData.append("file", res.file);
        uploadFile(formData).then((res) => {
          if (res.result) {
            state.formState.filepath = res.data;
          } else {
            message.error("上传失败");
          }
          state.uploadLoading = false;
        });
      }
    };

    const handleRadioClick = (label) => {
      if (state.formState.label === label) {
        state.formState.label = null;
      }
    };

    return {
      ...toRefs(state),
      handleCancel,
      layout,
      name,
      onFinish,
      onFinishFailed,
      uploadFunc,
      handleRadioClick,
    };
  },
};
</script>

<style lang="scss"></style>
